<template>
  <div class="main-box">
    <c-table
      class="table"
      ref="cTable"
      selection
      hasBorder
      :size="size"
      :max-height="448"
      :loading="isLoading"
      :table-header="tableHeader"
      :table-list="tableList"
      :page-info="pageInfo"
      :table-inner-btns="tableInnerBtns"
      @change-pagination="changePagination"
      @single-handle="changeSingleHandle"
    >
      <template v-slot:header>
        <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
      </template>
    </c-table>
    <el-form ref="formRef" :model="formModel" :rules="rules" label-width="120px" class="form" label-position="right" status-icon>
      <el-form-item label="网点名称">
        <el-input v-model.trim="curParkName" class="form-item" placeholder="请选择还车网点" disabled />
      </el-form-item>
      <el-form-item label="是否强制结单">
        <query-dict :dict-list="returnCarType" show-type="radio" :value.sync="formModel.returnTheCarStatus"></query-dict>
      </el-form-item>
      <el-form-item label="强制结单原因" :prop="formModel.returnTheCarStatus === 0 ? 'returnCarCause' : ''">
        <el-input
          type="textarea"
          :rows="4"
          maxlength="100"
          show-word-limit
          :placeholder="formModel.returnTheCarStatus === 0 ? '请输入强制结单原因' : '请输入结单原因'"
          v-model.trim="formModel.returnCarCause"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MixinForm from 'mixins/form'
import mixinTable from 'mixins/table'
import dictObj from '@/store/dictData'

export default {
  mixins: [MixinForm, mixinTable],
  props: {
    initData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      returnCarType: dictObj.returnCarType,
      curParkName: '', // 当前选择的网点名称
      tableList: [],
      tableInnerBtns: [],
      curParkInfo: '',
      rules: {
        returnCarCause: [{ required: true, message: '还款原因不能为空', trigger: 'blur' }]
      },
      tableHeader: [
        {
          label: '所属城市',
          prop: 'cityName',
          width: 60
        },
        {
          label: '所属区域',
          prop: 'areaName',
          width: 60
        },
        {
          label: '网点名称',
          prop: 'parkName',
          search: {
            type: 'input',
            prop: 'name'
          }
        },
        {
          label: '网点地址',
          prop: 'parkAddress',
          width: 200
        }
      ]
    }
  },
  computed: {
    formModel: {
      get() {
        return this.initData
      },
      set(val) {
        this.$emit('update:init-data', val)
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.outlets
        .fetch('parkList', {
          ...searchDate,
          ...other,
          isTemporary: 1,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    changeSingleHandle(item) {
      if (item) {
        this.curParkName = item.parkName
        this.formModel.parkId = item.id
      } else {
        this.curParkName = ''
        this.formModel.parkId = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.main-box {
  display: flex;
}
.form {
  flex: 1;
  margin-left: 20px;
  border-left: 1px solid @border-default;
  .form-item {
    width: 100%;
  }
  .form-select {
    width: 50%;
  }
  .pic {
    padding-bottom: 25px;
    span {
      display: inline-block;
      margin-bottom: 10px;
    }
    .info {
      height: 20px;
      margin-top: 5px;
      font-size: @f12;
      line-height: 20px;
    }
  }
}
.table {
  flex: 2;
}
</style>
